<script src="app/controllers/blogs/AddTopicBlogController.js"></script>

<div class="hfr-loading" ng-class="{true:'hfr-showContent', false:''}[showViewContent]" ng-controller="AddTopicBlogController">
	<div class="hfr-contentLoadingBar">
		<div id="dot1" class="loader-dot"></div>
		<div id="dot2" class="loader-dot"></div>
		<div id="dot3" class="loader-dot"></div>
	</div>
	<div class="hfr-loadingStatus">
		<!-- VIEW Add topics
    	================================================== -->
    	<div id="hfr-addTopics" class="hfr-mw450 hfr-margin-auto">
			<form class="hfr-formAddNewSite" name="topicForm">
				<h2 class="hfr-heading">{{'static.addTopic.title' | translate}}</h2>
				<div class="form-group hfr-topics">
					<div class="input-group">
						<span class="input-group-addon ti-folder"></span>
						<input type="text" ng-model="topicSelected" placeholder="{{'static.addTopic.placeholderTopicId' | translate}}" 
							typeahead="topic as topic.id for topic in autotopics | filter:{name:$viewValue} | filter:filterAlreadyAdded "
							typeahead-on-select="selectTypeaheadTopic($item, $model, $label)" 
							class="form-control" ng-keypress="select_topic($event)">
					</div>
					<div class="hfr-loading" ng-class="{true:'hfr-showContent', false:''}[showTopicSelected]">
						<div class="hfr-contentLoadingBar">
							<div id="dot1" class="loader-dot"></div>
							<div id="dot2" class="loader-dot"></div>
							<div id="dot3" class="loader-dot"></div>
						</div>
						<div class="hfr-loadingStatus">
							<div class="hfr-topicSelected">
								<span ng-repeat="selectTopic in selectTopics">{{topics[selectTopic]['name']}} <span class="ti-close" ng-click="remove_topic(selectTopic)"></span></span>
							</div>
						</div>
					</div>
					
				</div>
				<hr />
				
				<div class="row">
					<div class="col-md-4">
						<a href class="hfr-button-link" back-button>
							<span class="ti-angle-left"></span> {{'static.addWordpress.back' | translate}}
						</a>
					</div>
					<div class="col-md-8 content-right">
						<button type="button" class="hfr-button-blue hfr-solid" ng-click="add_topic(topicForm)"  
							ng-class="{'hfr-loading': processing == true}" ng-disabled="processing">
							<span class="hfr-spin ti-reload"></span>{{'static.addTopic.btnName' | translate}}
						</button>
					</div>
				</div>
			</form>
			
		</div>
    	<!-- =============== End view =============== -->
	</div>
</div>